<template>
  <div class="category-container">
    <div class="search-header">
      <div class="back-img">
        <img src="images/back.png" alt @click="searchback" />
      </div>
      <div class="import">
        <div class="search-icon"></div>
        <input type="text" placeholder="芭比娃娃" @click="gotoserch" />
      </div>
      <div class="dian" @click="blackbtnclick">
        <span></span>
        <div class="blackmenu" :class="{blackbtnactive:isblackclick==false}">
          <div class="blacktriankle"></div>
          <div class="blackmenubtn" @click="gotootherpage(0)">
            <div class="blackbtnlogo0"></div>
            <div class="blackbtndes">首页</div>
          </div>
          <div class="blackmenubtn" @click="gotootherpage(1)">
            <div class="blackbtnlogo1"></div>
            <div class="blackbtndes">分类搜索</div>
          </div>
          <div class="blackmenubtn" @click="gotootherpage(2)">
            <div class="blackbtnlogo2"></div>
            <div class="blackbtndes">购物车</div>
          </div>
          <div class="blackmenubtn" @click="gotootherpage(3)">
            <div class="blackbtnlogo3"></div>
            <div class="blackbtndes">我的京东</div>
          </div>
          <div class="blackmenubtn" @click="gotootherpage(4)">
            <div class="blackbtnlogo4"></div>
            <div class="blackbtndes">浏览记录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="categorybody">
      <div class="categorybody-nav-wrap" ref="navscroll">
        <div
          class="c-n-w-list"
          v-for="(item,index) in categoryList"
          :key="index"
          :class="{categoryactive:index==flag}"
          @click="catenavbtnclick(index,$event)"
        >
          <div>{{item.title}}</div>
        </div>
      </div>
      <div class="category-good-list-wrap" ref="goodscroll">
        <div class="category-good-list" v-for="(result,i) in categorytitleList " :key="i">
          <div class="cate-good-list-head">
            <div class="cate-good-list-head-name">{{result.name}}</div>
            <div v-if="i==0&&flag==0" class="cate-good-list-head-name-img">
              <img src="images/paihangbang.png" alt />
              <span>排行榜</span>
              <img src="images/rightshoot.png" alt />
            </div>
          </div>
          <div class="cate-good-list-cont">
            <div class="cate-good-list-cont-wrap" v-for="(good,j) in result.list" :key="j">
              <div class="cate-good-list-cont-img">
                <img v-lazy="good.url" alt />
              </div>
              <div class="cate-good-list-cont-des">{{good.des}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <foot-list></foot-list>
  </div>
</template>

<script>
import Foot from "../foot/Foot.vue";
import Axios from "axios";
import store from "../../store/index.js";

export default {
  store: store,
  name: "category",
  data() {
    return {
      categoryList: [],
      categorytitleList: [],
      isblackclick: false
      // styleObj: {
      //   position: "relative",
      //   top: "0px"
      // }
    };
  },
  computed: {
    flag() {
      return this.$store.state.categorybtnindex;
    }
  },
  // mounted(){
  //   window.addEventListener("scroll",this.gotoroll,false)
  // },
  components: {
    "foot-list": Foot
  },
  methods: {
    searchback() {
      this.$router.go(-1);
    },
    gotoserch() {
      this.$router.push("/search");
    },
    catenavbtnclick: function(index, event) {
      let that = this;
      this.categorytitleList = this.categoryList[index].List;
      this.$store.commit("catenavchange", index);
      // console.log(event);
      let distance = event.target.clientHeight * index;
      setTimeout(function() {
        that.$refs.navscroll.scrollTop = distance;
      }, 250);

      this.$refs.goodscroll.scrollTop = 0;
      //   let originheight = that.$refs.navscroll.scrollTop;
      //   let length = (distance - originheight) / 60;

      //   let timer = setInterval(function() {
      //     if (timer <= 60) {
      //       that.$refs.navscroll.scrollTop += length;
      //     } else {
      //       clearInterval(timer);
      //     }
      //   }, 18);
    },
    blackbtnclick() {
      this.isblackclick = !this.isblackclick;
    },
    gotootherpage(a) {
      if (a == 0) {
        this.$router.push({ path: "/" }).catch(function() {
          return;
        });
      }

      if (a == 1) {
        this.$router.push({ path: "/category" }).catch(function() {
          return;
        });
      }

      if (a == 2) {
        this.$router.push({ path: "/cart" }).catch(function() {
          return;
        });
      }
      if (a == 3) {
        this.$router.push({ path: "/login" }).catch(function() {
          return;
        });
      }
    }
    // gotoroll(){
    //   console.log($event)
    // }
  },
  // watch: {
  //   flag: function(newVal, oldVal) {
  //     this.styleObj.top =  -newVal * 46 + "px";
  //   }
  // },
  created() {
    let that = this;
    Axios.get("data/category.json").then(function(res) {
      that.categoryList = res.data.result;
      
      that.categorytitleList = res.data.result[0].List;
    
    });
    this.isblackclick = false;
  }
};
</script>

<style>
.blackbtnactive {
  display: none;
}
.blackmenu {
  height: 200px;
  width: 125px;
  position: fixed;
  top: 53px;
  right: 10px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 5px;
  border-radius: 4px;
}
.blacktriankle {
  position: absolute;
  top: -5px;
  right: 5px;
  width: 10.5px;
  height: 5px;
  background: url("../../../public/images/blackmenu.png");
  background-size: 100% 100%;
}
.blackmenubtn {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
  height: 40px;
}
.blackbtndes {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  line-height: 40px;
}
.blackbtnlogo0 {
  width: 40px;
  height: 40px;
  background: url("../../../public/images/blackbtnhome.png") no-repeat center
    center;
  background-size: 15px;
}
.blackbtnlogo1 {
  width: 40px;
  height: 40px;
  background: url("../../../public/images/blackbtnsearch.png") no-repeat center
    center;
  background-size: 15px;
}
.blackbtnlogo2 {
  width: 40px;
  height: 40px;
  background: url("../../../public/images/blackbtncart.png") no-repeat center
    center;
  background-size: 15px;
}
.blackbtnlogo3 {
  width: 40px;
  height: 40px;
  background: url("../../../public/images/blackbtnuser.png") no-repeat center
    center;
  background-size: 15px;
}
.blackbtnlogo4 {
  width: 40px;
  height: 40px;
  background: url("../../../public/images/blackbtnhistory.png") no-repeat center
    center;
  background-size: 15px;
}
.category-container {
  /* position: relative; */
  width: 100%;
  height: 100%;
  /* overflow: auto; */
}
html,
body {
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
}
.search-header {
  width: 100%;
  height: 45px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(229, 229, 229);
  z-index: 1000;
}

.back-img {
  width: 40px;
  height: 44px;
  /* line-height: 44px;
  text-align: center; */
  flex-shrink: 0;
}

.back-img img {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 12px 0 0 10px;
}

.dian {
  width: 40px;
  height: 44px;
  line-height: 44px;
  flex-shrink: 0;
}

.dian span {
  background: url("../../../public/images/threepoint.png") no-repeat 50%;
  display: inline-block;
  margin: 12px 12px 12px 10px;
  width: 20px;
  height: 20px;
  background-size: 20px;
}
.import {
  width: 100%;
  border: none;
  border-radius: 15px;
  height: 30px;
  flex-grow: 1;
  background-color: rgb(247, 247, 247);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-icon {
  width: 18px;
  height: 15px;
  display: inline-block;
  background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline)
    no-repeat;
  background-position: -80px 0;
  background-size: 200px;
  margin-left: 10px;
  margin: 0 5px 0 15px;
  z-index: 1;
  flex-shrink: 0;
}
.import input {
  border: 0;
  background: 0 0;
  font-size: 12px;
  color: #232326;
  padding-left: 5px;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  height: auto;
  margin: 0 0 0 5px;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  line-height: 30px;
  outline: none;
}
.categorybody {
  /* position: relative;
  left: 0;
  top: 45px; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 45px;
  padding-bottom: 50px;
}
.categorybody-nav-wrap {
  position: relative;
  left: 0;
  top: 0;
  width: 86px;
  background: #f8f8f8;
  height: 100%;
  overflow-y: auto;
  min-height: 100%;
  color: #333;
  font-size: 14px;
}
.categorybody-nav-wrap::-webkit-scrollbar {
  display: none;
}
/* .categorybody::-webkit-scrollbar{
  display: none;
} */
.c-n-w-list {
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  /* position: relative; */
}
.categoryactive {
  color: #e93b3d;
  background: #fff;
  border-right: 0.5px solid #f8f8f8;
}
.category-good-list-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  margin-left: 86px;
  overflow: auto;
  padding-top: 45px;
  padding-bottom: 50px;
}
.category-good-list-wrap::-webkit-scrollbar {
  display: none;
}
.category-good-list {
  width: 100%;
  margin-top: 19px;
  /* height: 100%; */
}
.cate-good-list-head {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between;
  height: 15px;
}
.cate-good-list-head-name {
  height: 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 15px;
  margin-left: 7px;
}
.cate-good-list-head-name-img {
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  margin-right: 7px;
  color: #848689;
}
.cate-good-list-head-name-img img {
  width: 12px;
  height: 12px;
  margin-right: 6px;
}
.cate-good-list-cont {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding-left: 17px;
  padding-right: 17px;
  margin-top: 16px;
}
.cate-good-list-cont-wrap {
  height: 107px;
  width: 32.8%;
}
.cate-good-list-cont-img {
  height: 70px;
  width: 70px;
  margin: 0 auto;
}
.cate-good-list-cont-img img {
  width: 100%;
  height: 100%;
}
.cate-good-list-cont-des {
  height: 35px;
  margin-top: 2px;
  font-size: 12px;
  text-align: center;
}
</style>